<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{padding: 0;margin: 0;list-style: none}
#divbox{
    width: 1000px;
}
ul{
    width: 1000px;
    height: 300px;
}
ul li{
    height: 300px;
    float: left;/*
    width: 100px; */
}
ul li a{
    text-decoration: none;
    color:#666;
    width: 100px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    display: block;
    background-color:#fff;
    opacity: 0.3;
}
.pic1{
    background: url('1.png');
}
.pic2{
    background: url('2.png');
}
.pic3{
    background: url('3.png');
}
.pic4{
    background: url('4.png');
}
.active{
    width: 700px;
}
</style>
<body>
    <div id="divbox">
        <ul>
            <li class="pic1"><a href="javascript:;">床头明月光</a></li>
            <li class="pic2"><a href="javascript:;">疑似地上霜</a></li>
            <li class="pic3"><a href="javascript:;">举头望明月</a></li>
            <li class="pic4"><a href="javascript:;">低头思故乡</a></li>
        </ul>
    </div>
</body>
<script src="./jquery-1.11.3.min.js"></script>
<script>    
    $(function(){
　　$(".handpic ul li").mouseover(function(){
　　　　$(this).stop(true).animate({'width':'700px'},1000).siblings().stop(true).animate({'width':'100px'},1000);
　　});
});
</script>
</html>